<template>
  <div class="resource-select">
    <el-dialog
      title="文件选择"
      width="60%"
      :visible.sync="visible"
      :before-close="doCancel"
    >
      <div class="content-nopadding">
        <div class="options">
          <el-form :inline="true" :model="query">
            <el-form-item label="名称">
              <el-input v-model="query.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item class="-ops">
              <el-button type="primary" @click.stop="doQuery">查询</el-button>
              <swak-link
                class="el-button el-button--primary -ops-right"
                @link:click="selectResource"
              >选择
              </swak-link
              >
              <div class="upload-wrap -ops-right">
                <el-upload
                  action=""
                  :show-file-list="false"
                  :multiple="true"
                  accept="string"
                  :limit="1000"
                  :on-exceed="onExceed"
                  :http-request="doUpload"
                >
                  <swak-link class="el-button el-button--warning">
                    <i class="el-icon-upload2"></i><span>上传</span>
                  </swak-link>
                </el-upload>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="datas"
          stripe
          style="width: 100%"
          highlight-current-row
          @row-click="handleCurrentChange"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="createDate" label="创建日期" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="缩略图">
            <template slot-scope="scope">
              <a v-if="scope.row.thumbnail"
              ><img :src="scope.row.thumbnail"
              /></a>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="size" label="大小" width="80" align="right">
            <template slot-scope="scope">
              <span>{{ scope.row.size | renderSize }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sees"
            label="查看次数"
            width="80"
            align="right"
          ></el-table-column>
          <el-table-column label="选择" width="80" align="center">
            <template slot-scope="scope">
              <i
                v-if="scope.row && scope.row.checked"
                class="el-icon-success selected"
              ></i>
            </template>
          </el-table-column>
        </el-table>
        <nav class="pagination">
          <el-pagination
            background
            layout="pager"
            :total="this.param.recordCount"
            :page-size="this.param.pageSize"
            @current-change="changePage"
          >
          </el-pagination>
        </nav>
        <div class="upload-dialog">
          <transition name="el-fade-in-linear">
            <el-dialog
              :title="uploadDialog.title"
              :visible.sync="showProgress"
              :modal="false"
              top="0vh"
              :close-on-click-modal="false"
            >
              <div
                class="upload-dialog--file"
                v-for="file in files"
                :key="file.id"
              >
                <span>{{ file.name }}</span>
                <el-progress
                  :percentage="file.percent"
                  :status="file.status"
                ></el-progress>
              </div>
            </el-dialog>
          </transition>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Upload from "@/ui/common/mixins/upload";
  import ResourceApi from "@/api/manage/resource";

  const formateSize = function (value) {
	if (null == value || value == "") {
	  return "0 Bytes";
	}
	var unitArr = new Array(
	  "Bytes",
	  "KB",
	  "MB",
	  "GB",
	  "TB",
	  "PB",
	  "EB",
	  "ZB",
	  "YB"
	);
	var index = 0,
	  srcsize = parseFloat(value);
	index = Math.floor(Math.log(srcsize) / Math.log(1024));
	var size = srcsize / Math.pow(1024, index);
	size = size.toFixed(2);
	return size + unitArr[index];
  };
  export default {
	components: {},
	name: "resource-select",
	mixins: [Upload],
	data() {
	  return {
		datas: [],
		param: {
		  pageIndex: 1,
		  recordCount: 0
		},
		query: {
		  name: ""
		},
		uploadDialog: {
		  title: "文件上传进度"
		}
	  };
	},
	props: {
	  visible: {
		type: Boolean,
		default: false
	  },
	  multipled: {
		type: Boolean,
		default: false
	  }
	},
	watch: {
	  visible: function () {
		if (this.visible) {
		  this.page(1);
		}
	  }
	},
	mounted() {
	  this.$on("upload:end", () => {
		this.page(1);
	  });
	},
	methods: {
	  page: function (index) {
		this.param.pageIndex = index;
		ResourceApi.page(this.param, this.query).then(res => {
		  res.obj.data.forEach(d => {
			d.checked = false;
		  });
		  this.datas = res.obj.data;
		  this.param = res.obj.param;
		});
	  },
	  doQuery: function () {
		this.page(1);
	  },
	  changePage: function (index) {
		this.page(index);
	  },
	  doCancel: function () {
		this.$emit("update:visible", false);
	  },
	  handleCurrentChange: function (selected) {
		if (selected) {
		  selected.checked = !selected.checked;
		}
	  },
	  selectResource: function () {
		if (!this.multipled) {
		  var selected = null;
		  this.datas.forEach(s => {
			if (s.checked && !selected) {
			  selected = s;
			}
		  });
		  var resource = {};
		  if (selected) {
			var content = JSON.parse(selected.content);
			if (content.signedUrl) {
			  resource.url = content.signedUrl;
			} else {
			  resource.auth = true;
			}
			resource.id = selected.id;
			resource.name = selected.name;
			resource.size = formateSize(selected.size);
			resource.type = selected.type;
		  }
		  this.$emit("update:selected", resource);
		  this.$emit("update:visible", false);
		} else {
		  var resources = [];
		  this.datas.forEach(s => {
			if (s.checked) {
			  var resource = {};
			  var content = JSON.parse(s.content);
			  if (content.signedUrl) {
				resource.url = content.signedUrl;
			  } else {
				resource.auth = true;
			  }
			  resource.id = s.id;
			  resource.name = s.name;
			  resource.size = formateSize(s.size);
			  resource.type = s.type;
			  resources.push(resource);
			}
		  });
		  this.$emit("update:selected", resources);
		  this.$emit("update:visible", false);
		}
	  }
	},
	filters: {
	  renderSize: function (value) {
		return formateSize(value);
	  }
	}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../common/stylus/variable.styl"
  .selected {
    color $color-success
  }
</style>
